import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter_eve_plugin/components/main/app_bar.dart';
import 'package:flutter_eve_plugin/model/health/user_info.dart';
import 'package:flutter_eve_plugin/pages/ye_xiu/login/actions.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/login/main.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/main.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class LoginSelectRolePage extends StatefulWidget {
  final String title;

  LoginSelectRolePage({Key key, this.title}) : super(key: key);

  @override
  _LoginSelectRolePageState createState() => _LoginSelectRolePageState();
}

class _LoginSelectRolePageState extends State<LoginSelectRolePage> {
  IdolInfo _indexIP;

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(converter: (store) {
      return AppStateViewModel(
          state: store.state,
          yeXiuStateViewModel: YeXiuStateViewModel(
              loginStateViewModel: LoginStateViewModel(appHome: (ip) {
                store.dispatch(switchIP(ip));
          })));
    }, builder: (context, vm) {
      var list = vm.state.yeXiuState.loginState.bindResultModel?.data?.idolList;
      return Scaffold(
        backgroundColor: Colors.white,
        appBar: buildAppBar(context,
            title: widget.title,
            titleColor: Color(0xFF333333),
            type: FigureIP.YE_XIU,
            colors: [Colors.white, Colors.white]),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: setRatio(40),
            ),
            CarouselSlider(
              viewportFraction: 0.65,
              aspectRatio: 1,
              enlargeCenterPage: true,
              onPageChanged: (index) {
                setState(() {
                  if (list != null && list[index] != null) {
                    _indexIP = list[index];
                  }
                });
              },
              items: (list == null || list.isEmpty)
                  ? [Container()]
                  : list?.map(
                      (item) {
                        return Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(
                                  Radius.circular(setRatio(10))),
                              boxShadow: [
                                BoxShadow(
                                    color: Color(0x24000000),
                                    blurRadius: setRatio(10))
                              ]),
                          margin: EdgeInsets.all(setRatio(10)),
                          child: ClipRRect(
                            borderRadius:
                                BorderRadius.all(Radius.circular(setRatio(10))),
                            child: Stack(children: <Widget>[
                              Container(
                                color: Colors.grey,
                                //item.showUrl
                                child: Image.network(
                                    'http://pic1.win4000.com/mobile/e/523913b543256.jpg',
                                    fit: BoxFit.fill),
                              ),
                              Positioned(
                                bottom: setRatio(12),
                                right: setRatio(7),
                                child: item.idol == _indexIP?.idol ?? ''
                                    ? Image.asset(
                                        imageUtilYeXiu('login/icon_ip_preview@2x'),
                                        width: setRatio(54),
                                        height: setRatio(54),
                                      )
                                    : Container(),
                              ),
                            ]),
                          ),
                        );
                      },
                    )?.toList(),
            ),
            SizedBox(
              height: setRatio(18),
            ),
            Text(
              getIpName(),
              style:
                  TextStyle(color: Color(0xFF444444), fontSize: setTextSp(16)),
            ),
            SizedBox(
              height: setRatio(10),
            ),
            Container(
              padding: EdgeInsets.only(left: setRatio(60), right: setRatio(60)),
              child: Text(
                '${_indexIP?.desc ?? ""}',
                style: TextStyle(
                    color: Color(0xFF999999), fontSize: setTextSp(12)),
                textAlign: TextAlign.center,
              ),
            ),
            Expanded(child: Container()),
            GestureDetector(
              onTap: (){
                vm.yeXiuStateViewModel.loginStateViewModel.appHome(getIpName());
              },
              child: Container(
                margin: EdgeInsets.only(bottom: setRatio(39)),
                width: setRatio(315),
                height: setRatio(46),
                decoration: (_indexIP?.canSwitch ?? 0) == 1
                    ? BoxDecoration(
                        borderRadius:
                            BorderRadius.all(Radius.circular(setRatio(5))),
                        gradient: LinearGradient(
                            colors: [Color(0xFF0386FF), Color(0xFF03AAFF)],
                            begin: Alignment(0.5, 0),
                            end: Alignment(0.5, 1)))
                    : BoxDecoration(
                        color: Color(0xFFD8D8D8),
                        borderRadius:
                            BorderRadius.all(Radius.circular(setRatio(5))),
                      ),
                child: Center(
                  child: Text(
                    '使用TA',
                    style: TextStyle(
                        fontSize: setTextSp(17), color: Color(0xFFFFFFFF)),
                  ),
                ),
              ),
            )
          ],
        ),
      );
    });
  }

  String getIpName() {
    String ip = _indexIP?.idol ?? '';
    if (ip == 'C2') {
      return '琥珀';
    } else if (ip == 'YEXIU') {
      return '叶修';
    }
    return ip;
  }
}
